<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span v-if="isE">试题录入</span>
        <span v-else>试题修改</span>
      </div>
      <div class="text item">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学科:" prop="subjectID">
            <el-select
              v-model="subjectID"
              placeholder="请选择"
              style="width: 400px"
            >
              <el-option
                v-for="item in xuekedata"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" prop="catalogID">
            <el-select
              v-model="ruleForm.catalogID"
              placeholder="请选择"
              style="width: 400px"
            >
              <el-option
                v-for="item in mldata"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" prop="enterpriseID">
            <el-select
              v-model="ruleForm.enterpriseID"
              placeholder="请选择"
              style="width: 400px"
            >
              <el-option
                v-for="item in qydata"
                :key="item.id"
                :label="item.shortName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市:" prop="city">
            <el-select
              v-model="ruleForm.province"
              placeholder="请选择"
              style="width: 198px"
              @change="jydiqu"
            >
              <el-option
                v-for="(item, index) in csdata"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <!-- 地区 -->
            <el-select
              v-model="ruleForm.city"
              placeholder="请选择"
              style="width: 198px; margin-left: 4px"
              @change="jydiqu"
            >
              <el-option
                v-for="(item, index) in dqdata"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向:" prop="direction">
            <el-select
              v-model="ruleForm.direction"
              placeholder="请选择"
              style="width: 400px"
            >
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型:" prop="questionType">
            <el-radio
              v-model="ruleForm.questionType"
              v-for="item in questionType"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-form-item>
          <el-form-item label="难度:" prop="difficulty">
            <el-radio
              v-model="ruleForm.difficulty"
              v-for="item in difficulty"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-form-item>
          <el-form-item label="题干:" prop="question">
            <!-- 富文本 -->
            <quill-editor
              v-model="ruleForm.question"
              @blur="$refs.ruleForm.validateField('question')"
            ></quill-editor>
          </el-form-item>
          <el-form-item v-if="ruleForm.questionType !== '3'" label="选项:">
            <!-- 选项 -->
            <xuanxiang ref="xuanx"></xuanxiang>
            <el-button
              type="danger"
              :disabled="ruleForm.questionType !== '2'"
              @click="zengjia"
              >+增加选项与答案</el-button
            >
          </el-form-item>
          <el-form-item label="视频解析:">
            <el-input
              v-model="ruleForm.videoURL"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="答案解析:" prop="answer">
            <!-- 富文本 -->
            <quill-editor
              v-model="ruleForm.answer"
              @blur="$refs.ruleForm.validateField('answer')"
            ></quill-editor>
          </el-form-item>
          <el-form-item label="题目备注:">
            <el-input
              type="textarea"
              v-model="ruleForm.remarks"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题标签:">
            <el-select
              v-model="tags"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择试题标签"
              style="width: 400px"
            >
              <el-option
                v-for="item in bqdata"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-if="isE" type="primary" @click="submitForm('ruleForm')"
              >立即提交</el-button
            >
            <el-button v-else type="success" @click="submitForm('ruleForm')"
              >立即修改</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import xuanxiang from './stlrzj/xuanxiang.vue'
import {
  xueke,
  simple,
  list,
  bqsimple,
  add,
  detail,
  update
} from '@/api/hmmm/entering'
import { provinces, citys } from '@/api/hmmm/citys'
// 导入方向数据
import { direction, difficulty, questionType } from '@/api/hmmm/constants'
export default {
  components: {
    xuanxiang
  },
  data () {
    return {
      isE: true, // 添加or修改
      tags: [], // 标签
      subjectID: '', // 学科
      catalogID: '', // 目录
      direction: direction, // 方向数据
      difficulty: difficulty, // 难度数据
      questionType: questionType, // 题型数据
      ruleForm: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          {
            code: '', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: '' // 是否正确答案
          }
        ], // 选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }], // 学科
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }], // 目录
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ], // 企业
        city: [{ required: true, message: '请选择地区', trigger: 'blur' }], // 地区
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }], // 方向
        questionType: [
          { required: true, message: '请选择题型', trigger: 'blur' }
        ], // 题型
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'blur' }
        ], // 难度
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }], // 题干
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }] // 答案解析
      }, // 校验规则
      xuekedata: [], // 学科数据
      csdata: [], // 城市数据
      dqdata: [], // 地区数据
      mldata: [], // 目录数据
      qydata: [], // 企业数据
      bqdata: [], // 标签数据
      xxarryL: ['A', 'B', 'C', 'D'] // 选项数组
    }
  },
  methods: {
    jydiqu () {
      this.$refs.ruleForm.validateField('city')
    },
    // 增加选项
    zengjia () {
      // charCodeAt()
      const a = this.xxarryL[this.xxarryL.length - 1]
      const b = a.charCodeAt() + 1
      const c = String.fromCharCode(b)
      this.xxarryL.push(c)
      // this.$refs.xuanx.$refs.duoxuan.xxarryL = this.xxarryL
      this.$refs.xuanx.$refs.duoxuan.xxSZ()
      // console.log(this.xxarryL, 56565665)
      // console.log(this.$refs.xuanx.$refs.duoxuan.xxarryL, 454454545)
    },
    // 获取学科列表
    async xuekeList () {
      const res = await xueke()
      this.xuekedata = res.data
      // console.log(res, 555556)
    },
    // 获取企业数据
    async qyList () {
      const data = {
        pagesize: 10000
      }
      const res = await list(data)
      this.qydata = res.data.items
      // console.log(res, 5555566565566565)
    },
    // 获取城市数据
    csList () {
      this.csdata = provinces()
    },
    // 提交
    submitForm (formName) {
      if (this.tags.length !== 0) {
        this.ruleForm.tags = this.tags.toString()
      }
      if (this.ruleForm.questionType === '1') {
        this.ruleForm.options = this.$refs.xuanx.$refs.dangxuan.options
      } else if (this.ruleForm.questionType === '2') {
        this.ruleForm.options = this.$refs.xuanx.$refs.duoxuan.options
      } else {
        this.ruleForm.options = ''
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.isE) {
            const res = await add(this.ruleForm)
            // console.log(res.status, 555565656)
            if (res.status === 200) {
              this.$message({
                message: '添加试题成功',
                type: 'success'
              })
              this.$router.push('/questions/list')
            }
          } else {
            const res = await update(this.ruleForm)
            if (res.status === 200) {
              this.$message({
                message: '修改试题成功',
                type: 'success'
              })
              this.$router.push('/questions/list')
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    hqid () {
      if (!this.$route.query.id) {
        this.isE = true
      } else {
        this.isE = false
      }
    }
  },
  created () {
    this.xuekeList()
    this.csList()
    this.qyList()
    this.hqid()
  },
  watch: {
    subjectID: {
      async handler () {
        this.ruleForm.subjectID = this.subjectID
        // 获取目录数据
        if (this.ruleForm.subjectID) {
          this.ruleForm.catalogID = ''
          if (!this.isE && this.catalogID) {
            if (this.ruleForm.tags) {
              this.tags = this.ruleForm.tags.split(',')
            }
            this.ruleForm.catalogID = this.catalogID
            this.catalogID = ''
          }
          const data = {
            subjectID: this.ruleForm.subjectID
          }
          const res = await simple(data)
          this.mldata = res.data
        }
        // 试题标签
        if (this.ruleForm.subjectID) {
          this.ruleForm.tags = ''
          const data = {
            subjectID: this.ruleForm.subjectID
          }
          const res = await bqsimple(data)
          // console.log(res, 555555)
          this.bqdata = res.data
        }
      },
      deep: true
    },
    ruleForm: {
      async handler () {
        // if (!this.isE) {
        //   if (this.ruleForm.questionType === '1') {
        //     this.$nextTick(() => {
        //       // console.log(this.$refs.xuanx.$refs, 6666)
        //       this.$refs.xuanx.$refs.dangxuan.options = this.ruleForm.options
        //       // console.log(this.$refs.xuanx.$refs.dangxuan.options, 999999999)
        //     })
        //   } else if (this.ruleForm.questionType === '2') {
        //     this.$nextTick(() => {
        //       this.$refs.xuanx.$refs.duoxuan.options = this.ruleForm.options
        //     })
        //   }
        // }
        // 获取地区数据
        if (this.ruleForm.province) {
          this.dqdata = citys(this.ruleForm.province)
        }
        // 题型
        if (this.ruleForm.questionType) {
          // console.log(this.$refs, 33333333333)
          this.$refs.xuanx.tix = this.ruleForm.questionType
          if (this.ruleForm.questionType === '1') {
            this.$nextTick(() => {
              console.log('单选')
              // this.$refs.xuanx.$refs.dangxuan.xxarryL = this.xxarryL
              // console.log(this.$refs.xuanx.$refs.dangxuan, 445454554)
              this.$refs.xuanx.$refs.dangxuan.opt = this.ruleForm.options
              // this.$refs.xuanx.$refs.dangxuan.options = this.ruleForm.options
              this.$refs.xuanx.$refs.dangxuan.xxarryL = this.xxarryL
              this.$refs.xuanx.$refs.dangxuan.xxSZ()
            })
          } else if (this.ruleForm.questionType === '2') {
            this.$nextTick(() => {
              console.log('多选')
              // this.$refs.xuanx.$refs.dangxuan.xxarryL = this.xxarryL
              // console.log(this.$refs.xuanx.$refs.dangxuan, 445454554)
              this.$refs.xuanx.$refs.duoxuan.options = this.ruleForm.options
              this.$refs.xuanx.$refs.duoxuan.xxarryL = this.xxarryL
              this.$refs.xuanx.$refs.duoxuan.xxSZ()
            })
          }
        }
      },
      deep: true
    },
    isE: {
      async handler () {
        if (!this.isE) {
          const data = {
            id: this.$route.query.id
          }
          const res = await detail(data)
          this.ruleForm = res.data
          this.subjectID = res.data.subjectID
          this.catalogID = res.data.catalogID
          console.log(this.ruleForm, '------')
        }
        if (this.ruleForm.questionType === '1') {
          // this.$refs.xuanx.$refs.dangxuan.isE = this.isE
          this.$nextTick(() => {
            this.$refs.xuanx.$refs.dangxuan.isE = this.isE
            // this.$refs.xuanx.$refs.dangxuan.options = this.ruleForm.options
            // console.log(this.$refs.xuanx.$refs.dangxuan.options, 66667777)
          })
        } else if (this.ruleForm.questionType === '2') {
          this.$nextTick(() => {
            this.$refs.xuanx.$refs.duoxuan.isE = this.isE
            // this.$refs.xuanx.$refs.duoxuan.options = this.ruleForm.options
          })
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}
::v-deep .ql-editor {
  min-height: 300px;
}
</style>
